<!-- <div class="card mb-4"> -->
<!-- <label class="form-label">
        <span ng-bind="$ctrl.header"></span>
        <div ng-show="$ctrl.isBusy" class="spinner-border text-primary" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </label> -->
<div id="{{$ctrl.header}}-tab" class="{{$ctrl.isOpen}}">
    <div class="row">
        <div class="col-12">
            <input type="text" class="form-control mb-4" placeholder="Press enter to create..."
                ng-model="$ctrl.newTitle" ng-enter="$ctrl.createData()" />
        </div>
    </div>
    <div class="row" dnd-list="$ctrl.selectedList">
        <div class="col-12" ng-repeat="item in $ctrl.selectedList" dnd-draggable="item" dnd-effect-allowed="move"
            dnd-moved="$ctrl.selectedList.splice($index, 1)" dnd-selected="$ctrl.models.selected = item"
            ng-if="!item.level || item.level < 1">
            <div class="drag-header float-start me-3">
                <!-- <div class="drag-header float-start me-3" dnd-draggable="nav" dnd-type="'nav'" dnd-effect-allowed="move"
                dnd-selected="$ctrl.selected = nav" dnd-moved="$ctrl.updateOrders($index)"
                ng-class="{'selected': $ctrl.selected === nav}" draggable="true"> -->
                <small class="fa fa-grip-vertical fa-xs text-black-50 align-middle"
                    style="cursor: grab; height: 12px; margin-bottom: 4px"></small>
            </div>
            <div class="float-start">
                <checkbox-switch value="item.dataId" is-selected="item.isActived" ng-hide="item.disabled"
                    callback="$ctrl.select(value, isSelected)"
                    description="item.attributeData.obj[$ctrl.columnDisplay]">
                </checkbox-switch>
                <sup class="d-block text-right" style="text-align: right;" ng-bind="item.obj.type"></sup>
                <div class="col-12 col-md-12 mx-2" ng-repeat="sub in item.attributeData.obj.childItems">
                    <checkbox-switch value="sub.id" is-selected="$ctrl.isSelected(sub.id, 1)"
                        callback="$ctrl.select(value, isSelected, '1')" description="sub[$ctrl.columnDisplay]">
                    </checkbox-switch>
                </div>
            </div>
            <div class="float-end">
                <!-- <div class="drag-header float-start me-3" dnd-draggable="nav" dnd-type="'nav'" dnd-effect-allowed="move"
                dnd-selected="$ctrl.selected = nav" dnd-moved="$ctrl.updateOrders($index)"
                ng-class="{'selected': $ctrl.selected === nav}" draggable="true"> -->
                <a class="" href="/portal/mix-database-data/details?dataId={{item.dataId}}"><span
                        class="fa fa-pen text-black-50 align-middle"
                        style="height: 12px; margin-bottom: 4px"></span></a>
            </div>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-12" ng-repeat="item in $ctrl.data.items | filter:$ctrl.newTitle" ng-hide="item.isActived">
            <checkbox-switch value="item.id" is-selected="item.isActived" callback="$ctrl.select(value, isSelected)"
                description="item.obj[$ctrl.columnDisplay]">
            </checkbox-switch>
            <sup class="d-block text-right" style="text-align: right;" ng-bind="item.obj.type"></sup>
            {{ctrl.selectedValues}}
        </div>
    </div>

    <paging class="small" page="$ctrl.data.page" page-size="$ctrl.data.pageSize" total="$ctrl.data.totalItems"
        ul-class="pagination pagination-sm justify-content-end m-0" a-class="page-link"
        paging-action="$ctrl.loadData(page-1)" scroll-top="true">
    </paging>
</div>
<!-- </div> -->